<template>
    <div id="Food">
        <Map/>
        <div class="message"></div>
        <div class="conTent">
            <div class="conTen">
                <img src="../assets/img/线.png" alt="线">
                <span>热销类目</span> 
                <img src="../assets/img/线.png" alt="线">
            </div>
            <div class="conT" >
                <div class="cT" v-for="(item,index) in arr" v-bind:key="index">
                    <img :src="item.urlimg" alt="热销">
                    <div class="text">{{item.text}}</div>
                </div>
            </div>
        </div>
        <div class="message"></div>
        <div class="box">
            <div v-for="(it,i) in array" v-bind:key="i">
                <div  class="box-min">
                    <span class="hot">爆品</span>
                    <img class="urlImg" :src="it.urlimg" alt="爆品" >
                    <div class="name">{{it.name}}</div>
                    <div class="txt">{{it.text}}</div>
                 </div>
            </div>
        </div>
        <div class="foot">亲,就这么多了</div>
    </div>
</template>
<script>
import Map from './Map';
export default {
    name:'Food',
    data() {
        return {
           arr:[
               {
                   urlimg:require("../assets/img/糖果.png"),
                   text:'糖果'
               },
               {
                   urlimg:require("../assets/img/膨化.png"),
                   text:'膨化'
               },
               {
                   urlimg:require("../assets/img/方便面.png"),
                   text:'方便面'
               },
               {
                   urlimg:require("../assets/img/巧克力.png"),
                   text:'巧克力'
               },
           ],
           array:[
               {
                   urlimg:require("../assets/img/蓝莓果汁.png"),
                   name:'野生蓝莓果汁饮料',
                   text:'￥100'
               },
               {
                   urlimg:require("../assets/img/坚果.png"),
                   name:'原味坚果',
                   text:'￥100'
               },
               {
                   urlimg:require("../assets/img/蓝莓果汁.png"),
                   name:'野生蓝莓果汁饮料',
                   text:'￥100'
               },
               {
                   urlimg:require("../assets/img/坚果.png"),
                   name:'原味坚果',
                   text:'￥100'
               },
               {
                   urlimg:require("../assets/img/蓝莓果汁.png"),
                   name:'野生蓝莓果汁饮料',
                   text:'￥100'
               },
               {
                   urlimg:require("../assets/img/坚果.png"),
                   name:'原味坚果',
                   text:'￥100'
               },
           ]
        }
    },
    components:{
        Map,
    }
}
</script>
<style scoped>
#Food{
     background-color: #fff;
}
   .message{
       width: 100%;
       height: 0.2rem;
       background-color: #f2f2f2;
   }
   .conTent{
       width: 100%;
       height: 3.6rem;
       border: solid 0.01rem #ccc;
   }
   .conTen{
       width: 100%;
       height: 0.6rem;
       font-size: 0.3rem;
       line-height: 0.6rem;
       text-align: center;
   }
   .conTen>span{
       margin: 0 0.2rem;
   }
   .conTen>img{
       margin: 0.08rem 0;
   }
   .conT{
       width: 100%;
       height: 3rem;
      display: flex;
      justify-content: space-evenly;
   }
   .cT{
       margin-top: 0.7rem;
   }
   .text{
       text-align: center;
       font-size: 0.24rem;
   }
   .box{
       width: 100%;
       height: 9.6rem;
       display: flex;
       justify-content: space-evenly;
       flex-wrap: wrap;
   }
   .box-min{
       width: 3.3rem;
       /* height: 2.8rem; */
       text-align: center;
       border: solid 0.01rem #ccc;
       display: flex;
       flex-direction: column;
       justify-content: center;
       position: relative;
   }
   .hot{
       display: block;
       width: 0.25rem;
       height: 0.5rem;
       font-size: 0.23rem;
       position: absolute;
       left: 0.06rem;
       top: -0.02rem;
       bottom: 2.4rem;
       right: 3.1rem;
       color: #fff;
   }
   .urlImg{
       width: 3.3rem;
       height: 2rem;
       vertical-align: top;
   }
   .name{
       width: 100%;
       height: 0.45rem;
       line-height: 0.45rem;
       font-size: 0.24rem;
       text-align: center;
   }
   .txt{
       font-size: 0.24rem;
       color: #e53e42;
   }
   .foot{
       width: 100%;
       height: 1.3rem;
       text-align: center;
       font-size: 0.18rem;      
       background-color: #f2f2f2;
       color: #808080; 
   }
</style>